<!DOCTYPE html>
<html>
    <head>
        <title>event bind</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="./vendor/avalon/avalon.modern.min.js" ></script>
        <style>
           .ms-hover div:hover{
                background:yellowgreen;
            }
        </style>
        <script type="text/javascript">

            // 如果你的VM结构复杂，需要监听某个对象下的子属性，你就需要在define方法外面，拿到刚才define的返回对象，一层层地定位到其父对象上，使用$watch方法：
            var a = avalon.define({
                $id: "test",
                aaa: {
                    bbb: {
                        ccc:111
                    }
                }
            })
            a.aaa.bbb.$watch("ccc", function(v){
                avalon.log(v)
            })
            setTimeout(function(){
                a.aaa.bbb.ccc = 222
            }, 1000)


        </script>
    </head>
    <body>
        <div ms-controller="test">
            <div>{{aaa.bbb.ccc}}</div>
        </div>

    </body>
</html>
